<template>
	<div id="dblist">
		<div class="head-top">
			<mt-header title="添加书籍">
				<router-link to="/addbooks" slot="left">
					<mt-button icon="off">
						<img src="../../../../static/schoolroom/club/quxiao.png" width="30px" height="30px" />
					</mt-button>
				</router-link>
			</mt-header>
		</div>

		<p class="dbl-title">我的书架</p>

		<div class="main">

			<div class="booklist" @click="addbook(item)" v-for="(item,index) in listdata" :key="index">
				<img :src="item.cover" alt="" width="100px" height="140px" />
				<p v-html="item.title">边城</p>
			</div>

		</div>

		<div v-html="book"></div>

	</div>
</template>

<script>
	import baseurl from './../../../api/baseurl.js';
	export default {
		data() {
			return {
				bookds: '1',
				userid: '',
				listdata: [],
				book: '',
				infoid: '',
			}
		},
		created() {
			var str = localStorage.getItem("userid"); //取回userid 
			this.userid = JSON.parse(str); 
			this.getbookinfo();
		},
		methods: {
			addbook(e) {
				this.infoid = e;
				console.log(e);
				this.$router.push({
					path: '/addbooks',
					name: 'addbooks',
					params: {
						bookds: this.bookds,
						bookinfo:this.infoid,
						type:2
					}
				})
			},

			getbookinfo() {
				this.$http({
						method: 'get',
						url: baseurl.urls + '/bookshelf/selectBookShelf',
						params: {
							userid: this.userid,
							pageNo: 1,
							pageSize: 100
						}
					})
					.then(response => {
						if(response.status == 200) {
							this.listdata = response.data.date.list;
							console.log(this.listdata)
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			passbookinfo() {
				this.$http({
						method: 'get',
						url: baseurl.urls + '/bookshelf/selectBookShelf',
						params: {
							userid: this.userid,
							pageNo: 1,
							pageSize: 100
						}
					})
					.then(response => {
						var listdat = response.data.date.list;
						var idval = this.id;

					})
					.catch(error => {
						console.log(error);

					});
			},
		}
	}
</script>

<style scoped>
	#dblist .dbl-title {
		padding-left: 15px;
		margin: 15px 0;
		font-size: 15px;
	}
	
	.main {
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
		flex-wrap: wrap;
		margin-bottom: 10vh;
	}
	.main::after{
		content: "";
		width: 100px;
	}
	.booklist {
		margin-bottom: 25px;
		position: relative;
		/*background-color: skyblue;*/
	}
	
	.booklist p {
		width: 100px;
		word-wrap: break-word;
		font-size: 14px;
	}
</style>